不错，很多网页设计都需要选择适当的颜色，让页面有最酷的外观，不过在真正的网页设计中，可能更多的时间都花在这样一些问题上：文本放在哪里，文本的外观是怎样的。由于存在这些问题，出现了一些HTML标记（如<FONT>和<CENTER>）允许你对文本的外观和放置有所控制。

因为文本如此重要，所以有很多CSS属性以这样或那样的方式影响文本。文本和字体之间有什么不同呢？简单地讲，文本是内容，而字体用于显示这个内容。使用文本属性，可以控制文本相对于该行余下内容的位置、使其作为上标、加下划线，以及改变大小写等。甚至还可以有限地模拟打字机的Tab键的使用。

下面先来讨论如何影响文本在行中的水平定位。写一个时事通讯或做一份报告时，你可能会采取一些步可以把这些基本动作看作是这些步骤的一部分。

缩进文本

将Web页面上一个段落的第一行缩进，这是一种最常用的文本格式化效果（去除段落之间的空行是第二常用的方法，这个内容将在第7章讨论）。有些网站在段落的第一个字母前放一个很小的透明图像，这些图像将文本推到后面来制造一种缩进文本的感觉.另外一些网站则使用完全非标准的SPACER标记。在CSS网站制作中，有一种更好的方法实现文本缩进，即 text-indent 属性。

计算值：

对于百分数值，要根据指定确定，对于长度值，则为绝对长度

通过使用text-indent属性，所有元素的第一行都可以缩进一个给定长度，甚至该长度可以是负值。当然，这个属性最常见的用途是将段落的首行缩进：

p {text-indent: 3em;}

这个规则会使所有段落的首行缩进3em。

一般地，可以为所有块级元素应用text-indent,但无法将这个属性应用到行内元素，图像之类的替换元素上也无法应用text-indent属性。不过，如果一个块级元素（如段落）的首行中有一个图像，它会随着该行的其余文本移动。

注意：如果想把一个行内元素的第一行“缩进”，可以用左内边距或外边距创造这种效果。

text-indent还可以设置为负值，利用这种技术，可以实现很多有意思的效果。最常见的用途是一种“悬挂缩进”，即第一行悬挂在元素中余下部分的左边：

p {text-indent:-4em;}

在为text-indent设置负值时要当心：上例中前3个词（“This is a”）可能会超出浏览器窗口的左边界。为了避免出现这种显示问题，建议针对负缩进再设置一个外边距或一些内边距：

p {text-indent:-4em; padding-left: 4em;}

不过，负缩进也可以得到充分利用。考虑下面的例子，如图6-2所示，这里增加了一个浮动图像：

p.hang {text-indent:-25px;}

<img src="star.gif" style="width: 60px; height: 60px;

float: left; alt="An image of a five-pointed star."/>

<p> This paragraph has a negatively indented first

line, which overlaps the floated image that precedes the text. Subsequent

lines do not overlap the image, since they are not indented in any way.</p>

使用这个简单的技术可以实现很多有意思的设计。

text-indent可以使用所有长度单位（包括百分数值）。在下面的例子中，百分数要相对于缩进元素父元素的宽度。换句话说，如果将缩进值设置为10%,所影响元素的第一行会缩进其父元素宽度的10%。

水平对齐

与text-indent相比，text-align是一个更基本的属性，它会影响一个元素中的文本行相互之间的对齐方式。前3个值相当直接，不过第4个和第5个则略有些复杂。

要理解这些值是如何工作的，最快的办法就是查看图6-5。

显然，值left，right和center会导致元素中的文本分别左对齐、右对齐和居中。因为text-align只应用于块级元素（如段落），所以无法将行内的一个锚居中而不影响行中的其余部分（你可能也不想这么做.因为这很可能导致文本重叠）。

西方语言都是从左向右读，所以text-align的默认值是left。文本在左边界对齐，右边界呈锯齿状（称为“从左到右”文本）。对于希伯来语和阿拉伯语之类的语言，text-align则默认为right，因为这些语言从右向左读。不出所料，center会使每个文本行在元素中居中。

注意：将块级元素或表元素居中，这要通过在这些元素上适当地设置左、右外边距来实现.详细内容见第7章。

虽然你可能认为text-align: center与<CENTER>元素的作用一样，但实际上二者大不相同。<CENTER>不仅影响文本，还会把整个元素居中，如表。text-align不会控制元素的对齐，而只影响其内部内容。图6-5很清楚地展示了这一点。实际元素没有从一端移到另一端。只是其中的文本受影响。

警告：IE6之前的IE/Win有一个危害较大的bug:它确实会把text-align: center处理为<CENTER>元素，不仅将文本居中，还会将元素居中。在IE6和更高版本IE的标准模式中就不会这样了，但在IE5.X和较早版本中仍是如此。

最后一个水平对齐属性是：justify，它会带来自己的一些问题。在两端对齐文本中，文本行的左右两端都放在父元素的内边界上，如图6-6所示。然后，调整单词和字母间的间隔，使各行的长度恰好相等。两端对齐文本在打印领域很常见（例如，本书就使用了两端对齐文本），不过在CSS网页设计中，还需要多做些考虑。

要由用户代理（而不是CSS）来确定两端对齐文本如何拉伸，以填满父元素左右边界之间的空间。例如，有些浏览器可能只在单词之间增加额外的空间，而另外一些浏览器可能会平均分布字母间的额外空间（不过CSS规范特别指出，如果letter-spacing属性指定为一个长度值，“用户代理不能进一步增加或减少字符间的空间”）。还有一些用户代理可能会减少某些行的空间，使文本挤得更紧密。所有这些做法都会影响元素的外观，甚至改变其高度，这取决于用户代理的对齐选择影响了多少文本行。

CSS也没有指定应当如何处理连字符（注1）[1]。大多数两端对齐文本都使用连字符将长单词分开放在两行上，从而缩小单词之间的间隔，改善文本行的外观。不过，由于CSS没有定义连字符行为，用户代理不太可能自动加连字符。因此，在CSS中，两端对齐文本看上去没有打印出来好看，特别是元素可能太窄，以至于每行只能放下几个单词。当然，使用窄设计元素是可以的，不过要当心相应的缺点。